<template>
  <div>
    <el-container style="height: 100%;">
      <el-aside class="info-aside"
        style="height: calc(90.5vh); width: 60px; overflow-y: auto; background-color: #F3F3FB;">
        <el-menu class="info-menu0 info-group" :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title">分组</template>
            <!-- <el-divider></el-divider> -->
            <el-menu-item-group style="background-color: #F3F3FB;" v-for="(item, index) in groups" :key="index">
              <el-menu-item :index="item.id.toString()" @click="getUser(item)">
                <el-avatar :size="size1">
                  {{ item.name.slice(0, 1) }}</el-avatar>
              </el-menu-item>
              <!-- <el-divider> </el-divider> -->
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-aside class="info-aside info1"
        style="height: calc(90.5vh); width: 200px; overflow-y: auto; background-color: #FAFBFF ;">
        <el-menu class="info-menu0 info-user">
          <el-menu-item class="weid m-10-10-0-10" index="99999" style="color: #fff; font-size: 16px;"
            @click="getWsData(1, 'click')">
            <!-- <el-badge is-dot class="item weidu-info">
              <el-avatar :size="size"></el-avatar>
            </el-badge> -->
            <el-avatar :size="size" style="margin-right: 10px;"></el-avatar>
            未读消息
          </el-menu-item>
          <!-- <el-divider></el-divider> -->
          <el-menu-item-group v-for="(item, index) in chatUser" :key="index">
            <el-menu-item class="box-s m-10-10-0-10 items" :index="item.id.toString()" @click="getWsData(item, 'click')">
              <div class="item" :class="[['bg-' + item.status]]"></div>
              <el-avatar :size="size1" :src="item.avatar"></el-avatar>
              <span style="font-weight: 600">
                {{ item.nickName ? item.nickName : item.name }}</span>
              
            </el-menu-item>
            <!-- <el-divider></el-divider> -->
          </el-menu-item-group>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- <el-header class="info-header" style="height: 50px"> </el-header> -->
        <el-main style="padding: 0; overflow-x: hidden; background-color: #F3F3FB;">
          <div style="width: 79%; float: left">
            <el-container>
              <el-aside style="width: 320px; overflow-y: auto; background-color: #F3F3FB;" class="info-aside">
                <div class="info-ss m-10-10-0-10" style="background-color: #fff; border-radius: 6px;">
                  <el-input placeholder="请输入账号" v-model="userName" clearable style="height: 40px;">
                    <el-button slot="append" style="color: #fff; width: 80px;" icon="el-icon-search"
                      @click="getWsData"></el-button>
                  </el-input>
                </div>
                <!-- <el-divider></el-divider> -->
                <div
                  class="infinite-list"
                  v-infinite-scroll="loadUser"
                  style="overflow:auto; height: calc(90.5vh - 170px); margin-top: 10px; background-color: #F3F3FB;"
                >
                  <el-menu :default-openeds="['1']" class="info-menu info0">
                    <el-submenu index="1" style="background-color: #F3F3FB;">
                      <template slot="title">
                        <div style="background-color: #fff;">
                          <i class="el-icon-chat-dot-round"></i>
                          好友对话
                        </div>
                      </template>
                      <!-- <el-divider></el-divider> -->
                      <el-menu-item-group style="background-color: #F3F3FB;" v-for="(item, index) in wsUser" :key="index">
                        <el-menu-item class="box-s1 m-10-10-0-10" :index="item.id" style="display: flex"
                          @click="startChat(item)">
                          <div style="float: left; display: flex; align-items: center;">
                            <el-badge v-if="Number(item.msgNum) != 0" :value="item.msgNum">
                              <el-avatar style="border-radius: 50px;" shape="square" :size="size">{{
                                index + 1
                              }}</el-avatar>
                            </el-badge>
                            <el-avatar v-if="Number(item.msgNum) == 0" shape="square" :size="size">{{ index + 1 }}</el-avatar>
                          </div>
                          <div style="float: left; display: flex; flex-direction: column; justify-content: center;">
                            <div>
                              <span style="
                                  margin-left: 10px;
                                  font-weight: 600;
                                  display: inline-block;
                                  width: 130px;
                                  overflow: hidden;
                                  text-overflow: ellipsis;
                                ">{{ item.friendId }}</span>
                              <span class="info-time">{{ item.msgTime }}</span>
                            </div>
                            <div class="info-xx">
                              <span class="info-xx-xq">{{
                                item.msgContent
                              }}</span>
                            </div>
                          </div>
                        </el-menu-item>

                        <!-- <el-divider></el-divider> -->
                      </el-menu-item-group>
                    </el-submenu>
                  </el-menu>
                </div>
                <div style="
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    height: 80px;
                    text-align: center;
                    width: 300px;
                  ">
                  <div>
                    <!-- <el-button plain @click="clean">一键消息已读</el-button> -->
                    <el-button type="primary" plain @click="addContactsBtn">上传通讯录</el-button>
                  </div>
                </div>
              </el-aside>
              <el-container style="
                  height: calc(90.5vh);
                  overflow-y: auto;
                  margin-left: 10px;
                  display: flex;
                  flex-direction: column;
                ">
                <el-header v-if="ws.user.receiveUser" class="info-header" style="height: 110px; line-height: 110px;">
                  <div style="font-size: 16px; display: flex; flex-direction: row; align-items: center;">
                    <el-avatar :size="size1" style="margin-right: 10px;"></el-avatar>
                    <div>{{ ws.user.receiveUser }}</div>
                    <el-tag v-if="ws.user.receiveUser && ws.user.type == '1'" style="margin-left: 10px"
                      @click="addFriend">添加好友</el-tag>
                  </div>
                </el-header>
                <!-- 聊天框内容 -->
                <el-main style="padding: 0">
                  <div v-show="shows" style="
                      text-align: center;
                      margin-top: 31%;
                      font-size: 84px;
                      color: #ccc;
                    ">
                    <i class="el-icon-chat-dot-round"></i>
                    <div style="font-size: 16px; font-weight: 500">
                      未选择聊天
                    </div>
                  </div>
                  <JwChat v-show="!shows" ref="jwChat" :config="config" :taleList="list" @enter="bindEnter"
                    v-model="inputMsg" :showRightBox="true" scrollType="scroll" :toolConfig="tool" />
                </el-main>
              </el-container>
            </el-container>
          </div>

          <div class="info-kjhf">
            <el-aside class="info-aside" style="margin-left: 10px; background-color: #F3F3FB;">
              <div class="info-ss" style="background-color: #fff; border-radius: 6px; margin-top: 10px;">
                <el-input placeholder="请输入话术内容" v-model="textContent" clearable style="height: 70px;">
                  <el-button @click="getChatVerbalTrick" slot="append" style="color: #fff; width: 80px;"
                    icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <!-- <el-divider></el-divider> -->

              <el-menu style="margin-top: 10px; background-color: #F3F3FB;" :default-openeds="['1']">
                <el-submenu class="box-s" index="1">
                  <template slot="title"><i class="el-icon-loading"></i>回复用户话术</template>
                  <!-- <el-divider></el-divider> -->
                  <el-menu-item-group v-for="(item, index) in config.quickList" :key="index">
                    <el-menu-item :index="index.toString()" style="display: flex" @click="bindEnter(item.text)">
                      <div class="info-xx">
                        <span class="info-xx-xq" style="color: #707C97">{{
                          index + 1 + "、 " + item.text
                        }}</span>
                      </div>
                    </el-menu-item>
                    <!-- <el-divider></el-divider> -->
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-aside>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <!-- <el-divider></el-divider> -->

    <!-- 添加或修改用户好友对话框 -->
    <el-dialog :title="friend.title" :visible.sync="friend.open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" disabled>
        <el-form-item label="聊天账号" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="数据账号" prop="friendId">
          <el-input v-model="form.friendId" placeholder="请输入好友id" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改用户好友对话框 -->
    <el-dialog :title="contacts.title" :visible.sync="contacts.open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="WS好友数据" prop="wsId">
          <el-select v-model="form.wsId" placeholder="请选择WS好友数据" style="width: 100%">
            <el-option v-for="dict in wsData" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加数量" prop="num">
          <el-input-number width="100%" :min="1" :max="500" v-model="form.num" placeholder="请输添加数量" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="contactsSubmitForm">确 定</el-button>
        <el-button @click="contactsCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listChatMessage,
  updateChatMessage,
  sumChatMessage,
} from "@/api/business/chatMessage";
import { updateChatContact, addContacts } from "@/api/business/chatContact";
import { listChatWs } from "@/api/business/chatWs";
import { listChatUser } from "@/api/business/chatUser";
import { listChatUserGroup } from "@/api/business/chatUserGroup";
import { listChatContact } from "@/api/business/chatContact";
import { listChatVerbalTrick } from "@/api/business/chatVerbalTrick";
import store from "@/store";
export default {
  data() {
    return {
      wsData: [],
      // 按钮loading
      buttonLoading: false,
      shows: true,
      sumNum: 0,
      chatType: 0,
      accNum: "",
      ws: {
        obj: null,
        // url: "ws://192.168.35.65:8080/websocket/message/" + store.getters.name,
        url: "ws://8.217.24.223/wss/websocket/message/" + store.getters.name,
        message: "",
        text_content: "",
        user: {
          sendUser: "",
          receiveUser: "",
          converId: "",
          type: "",
        },
      },
      groups: [],
      chatUser: [],
      wsUser: [],
      size: "large",
      size1: "medium",
      userName: "",
      textContent: "",
      inputMsg: "",
      list: [],
      tool: {
        show: ["file", "history", "img", ["文件1", "", "美图"]],
        callback: this.toolEvent,
      },
      config: {
        img: "image/cover.png",
        name: "JwChat",
        dept: "最简单、最便捷",
        callback: this.bindCover,
        historyConfig: {
          show: false,
          tip: "加载更多",
          callback: this.bindLoadHistory,
        },
        quickList: [],
      },

      timeout: 50 * 1000, //1分钟发一次心跳
      timeoutObj: null,
      serverTimeoutObj: null,
      friend: {
        title: "",
        open: false,
      },
      contacts: {
        title: "",
        open: false,
      },
      form: {},
      rules: {
        id: [{ required: true, message: "id不能为空", trigger: "blur" }],
        userId: [
          { required: true, message: "用户id不能为空", trigger: "blur" },
        ],
        friendId: [
          { required: true, message: "好友id不能为空", trigger: "blur" },
        ],
        avatarUrl: [
          { required: true, message: "头像不能为空", trigger: "blur" },
        ],
      },
      friendUser: [],
      queryData: undefined,
      pageNum: 1,
      pageSize: 20,
      isInfiniteScrollDisabled: false,
    };
  },
  created() {
    //获取分组
    listChatUserGroup({ showStatus: 1 }).then((response) => {
      this.groups = response.rows;
      if (this.groups.length != 0) {
        this.getUser(this.groups[0]);
      }
    });

    //获取回复话术
    this.getChatVerbalTrick();

    //建立链接
    this.webSocketInfo();

    //查询未读消息
    this.getWsData(1);

    //获取WS仓库
    listChatWs().then((response) => {
      var gruops = response.rows;
      var groupList = [];
      for (var i in gruops) {
        var info = {};
        info.value = gruops[i].id;
        info.label = gruops[i].name;
        groupList.push(info);
      }
      this.wsData = groupList;
    });
  },
  methods: {
    loadUser() {
      this.pageNum += 1;
      var param = this.queryData;
      param.pageNum = this.pageNum;
      param.pageSize = this.pageSize;
      listChatContact(param).then((resp) => {
        if (resp.rows.length > 0) {
          this.wsUser = this.wsUser.concat(resp.rows); //数组拼接，得到拼接后的数据
        }

        this.loadMsgRecord();
      });
      // console.log(1111);
    },
    //消息处理
    messageInfo(msg) {
      //处理未读消息列表
      var info = {};
      info.id = msg.converId;
      info.userId = msg.receiverId;
      info.friendId = msg.sendId;
      info.avatarUrl = "";
      info.nickName = "";
      info.msgNum = "1";
      info.msgTime = msg.date;
      info.msgContent = msg.messageContent;
      info.avatar = "";
      info.type = msg.type;

      //整合消息
      var status = this.wsUser.some((item) => {
        if (item.userId == info.userId && item.friendId == info.friendId) {
          return true;
        }
      });
      if (status) {
        this.wsUser.forEach((item) => {
          if (item.userId == info.userId && item.friendId == info.friendId) {
            item.msgNum = Number(item.msgNum) + 1;
            item.msgTime = info.msgTime;
            item.msgContent = info.msgContent;
          }
        });
      } else {
        this.wsUser.push(info);
      }

      //加载聊天记录
      this.loadMsgRecord();
    },
    clean() { },
    addContactsBtn() {
      if (this.ws.user.sendUser == "") {
        this.$modal.msgError("请先选择需要添加好友的账户");
        return;
      }
      this.contacts.title = "批量添加通讯录";
      this.contacts.open = true;
      this.form.userId = this.ws.user.sendUser;
    },

    addFriend() {
      this.friend.title = "添加好友";
      this.friend.open = true;
      this.form.id = this.ws.user.converId;
      this.form.userId = this.ws.user.sendUser;
      this.form.friendId = this.ws.user.receiveUser;
    },
    submitForm() {
      this.buttonLoading = true;
      if (this.form.id != null) {
        this.form.type = "2";
        updateChatContact(this.form)
          .then((response) => {
            this.$modal.msgSuccess("添加成功,点击聊天账户可查看好友列表");
            this.friend.open = false;
            this.getUser(this.groups[0]);
          })
          .finally(() => {
            this.buttonLoading = false;
          });
        this.form = {};
      }
    },
    // 取消按钮
    cancel() {
      this.friend.open = false;
      this.reset();
    },
    contactsSubmitForm() {
      this.buttonLoading = true;

      addContacts(this.form)
        .then((response) => {
          this.$modal.msgSuccess("添加成功,点击聊天账户可查看好友列表");
          this.contacts.open = false;
          this.getUser(this.groups[0]);
          this.form = {};
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    // 取消按钮
    contactsCancel() {
      this.contacts.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        userId: undefined,
        friendId: undefined,
        avatarUrl: undefined,
      };
      this.resetForm("form");
    },
    webSocketInfo() {
      const self = this;
      try {
        this.ws.obj = new WebSocket(this.ws.url);
      } catch (e) {
        self.reconnect();
      }
      this.ws.obj.onclose = function () {
        self.reconnect();
        console.log("ws连接关闭!");
      };
      this.ws.obj.onerror = function () {
        self.reconnect();
        console.log("ws连接错误!");
      };
      this.ws.obj.onopen = function () {
        console.log("ws连接成功!");
      };
      this.ws.obj.onmessage = function (event) {
        self.resetSocket();
        self.startSocket();

        if (event.data != "pong" && event.data != "连接成功") {
          //重新加载消息列表
          let info = eval("(" + event.data + ")");
          
          if('sendSuccess' in info){
            self.$modal.msgSuccess('发送成功');
          }
          if('sendFailed' in info){
            self.$modal.msgError('发送失败');
          }
          if('read' in info){
            // self.$modal.msgSuccess('已读');
            self.messageInfo(info);
          }
          if('document' in info) {
            self.$modal.msgSuccess('文件下载成功');
          }
          if('accountStatus' in info) {
            self.getUser(self.groups[0])
          }
          if('message' in info) {
            self.messageInfo(info);
          }

          // self.getWsData(self.chatType);
        }
      };
    },
    reconnect() {
      if (this.lockReconnect) return;
      this.lockReconnect = true;
      var self = this;

      //没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function () {
        self.webSocketInfo();
        self.lockReconnect = false;
      }, 2000);
    },
    startSocket() {
      var self = this;
      //这里发送一个心跳，后端收到后，返回一个心跳消息，onmessage拿到返回的心跳就说明连接正常
      this.timeoutObj = setTimeout(function () {
        self.ws.obj.send("ping");

        //如果超过一定时间还没重置，说明后端主动断开了,如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        self.serverTimeoutObj = setTimeout(function () { }, self.timeout);
      }, self.timeout);
    },
    resetSocket() {
      clearTimeout(this.timeoutObj);
      clearTimeout(this.serverTimeoutObj);
      return this;
    },

    //发起聊天
    startChat(item) {
      this.shows = false;

      //保存信息
      this.ws.user.sendUser = item.userId;
      this.ws.user.receiveUser = item.friendId;
      this.ws.user.converId = item.id;
      this.ws.user.type = item.type;

      //查询聊天记录
      this.readMsg();
      this.loadMsgRecord();
    },
    //查询账号的好友
    getWsData(item, flag) {

      this.wsUser = [];
      this.pageNum = 1;
      this.pageSize = 20;
      if ("click" == flag) {
        this.chatType = "2";
        this.shows = true;
        this.ws.user.receiveUser = "";
      }

      //未读
      var param = {};
      if (item == 1 || this.chatType == "1") {
        this.chatType = "1";
        param.friendId = this.userName;
      } else {
        this.chatType = "2";

        //查询 账号下 单个好友
        if (!item || !item.name) {
          param.userId = this.ws.user.sendUser;
          param.friendId = this.userName;

          //查询账号下所有好友
        } else {
          param.userId = item.name;
          this.ws.user.sendUser = item.name;
        }
      }

      //type 1 查询所有群发好友  type 2  查询通讯录好友
      param.type = this.chatType;
      this.queryData = param;
      param.pageNum = 1;
      param.pageSize = 20;
      listChatContact(param).then((response) => {
        this.wsUser = response.rows;
        this.loadMsgRecord();
      });
    },
    //获取未读总计
    getSumInfo() {
      sumChatMessage().then((response) => {
        this.sumNum = response.data.num;
      });
    },
    //消息修改已读
    readMsg() {
      var param = {};
      param.converId = this.ws.user.converId;
      if (param.converId) {
        //调整角标数量
        this.wsUser.forEach((item) => {
          // console.log(888, item);
          // console.log(555, this.ws.user);

          if (
            item.userId == this.ws.user.sendUser &&
            item.friendId == this.ws.user.receiveUser
          ) {
            // console.log(666);
            item.msgNum = 0;
          }
        });
        updateChatMessage(param).then(() => { });
      }
    },
    //聊天记录
    loadMsgRecord() {
      var param = {};
      param.converId = this.ws.user.converId;
      param.hostId = this.ws.user.sendUser;
      param.pageNum = 1;
      param.pageSize = 300;

      if (this.ws.user.converId != "") {
        listChatMessage(param).then((response) => {
          this.list = response.rows;
        });
      }
    },
    //发送消息
    bindEnter(str) {
      if (!this.ws.obj) return;
      const msg = str;
      if (!str) {
        msg = this.inputMsg;
      }
      if (!msg) return;
      var message =
        msg +
        "|" +
        this.ws.user.sendUser +
        "|" +
        this.ws.user.receiveUser +
        "|" +
        this.chatType;

      this.ws.obj.send(message);

      //延迟查询聊天记录
      const self = this;
      setTimeout(function () {
        self.loadMsgRecord();
      }, 1500);
    },

    //查询分组下的账号
    getUser(item) {
      listChatUser({ groupId: item.id }).then((response) => {
        this.chatUser = response.rows;
      });
    },
    //获取回复话术
    getChatVerbalTrick() {
      var param = {};
      param.name = this.textContent;
      listChatVerbalTrick(param).then((response) => {
        this.config.quickList = response.rows;
      });
    },
    //加载更多的回调函数
    async bindLoadHistory() {
      const history = new Array(3).fill().map((i, j) => {
        return {
          date: "2020/05/20 23:19:07",
          text: { text: j + new Date() },
          mine: false,
          name: "JwChat",
          img: "image/three.jpeg",
        };
      });
      let list = history.concat(this.list);
      this.list = list;
      console.log("加载历史", list, history);
      //  加载完成后通知组件关闭加载动画
      this.config.historyConfig.tip = "加载完成";
      this.$nextTick(() => {
        this.$refs.jwChat.finishPullDown();
      });
    },
    //附加文件或者需要处理的数据
    toolEvent(type, plyload) {
      console.log("tools", type, plyload);
    },
    bindCover(event) {
      console.log("header", event);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 0;
}

::v-deep .el-menu-item-group__title,
.el-menu-item {
  padding: 0 !important;
}

::v-deep .el-submenu__title {
  height: 49px;
  line-height: 49px;
}

::v-deep .el-avatar {
  // margin-bottom: 10px;
  // margin-left: 10px;
  // margin-right: 2px;
  width: 54px;
  height: 54px;
  border-radius: 100px;
  line-height: 54px;
}

::v-deep .el-input--medium .el-input__inner {
  height: 70px;
  line-height: 70px;
}

::v-deep .el-submenu .el-menu-item {
  height: 60px;
  line-height: 60px;
}

::v-deep .info1 .el-menu-item {
  height: 80px;
  line-height: 80px;
}

::v-deep .info0 .el-submenu .el-menu-item {
  height: 80px;
  line-height: 80px;
}

::v-deep .el-badge__content.is-fixed {
  right: 18px;
}

::v-deep .maizi .el-badge__content.is-fixed {
  margin-top: 8px;
}

.info:hover,
.info:focus,
.info:active {
  outline: none;
  background-color: hsl(222deg 17% 88%);
}

.info-li {
  display: inline-block;
  height: 49px;
}

::v-deep .el-avatar {
  // margin-right: 6px;
}

.info-aside {
  background: #fff;
  overflow: hidden;
  padding: 0;
  // border-right: 1px solid #ccc;
  margin-bottom: 0px;
}

.info-header {
  font-size: 12px;
  // border-bottom: 1px solid #ccc;
  // background-color: #fff;
  text-align: left;
  background-color: #FAFBFF;
}

.info-menu {
  border-right: 0px !important;
}

::v-deep .info-menu .el-menu {
  background-color: #F3F3FB;
}

::v-deep .info-menu .el-submenu__title {
  height: 70px;
  line-height: 70px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0 !important;
  border-radius: 6px;
}

::v-deep .info-menu .el-submenu .el-menu-item {
  line-height: 28px;
}

::v-deep .info-menu .el-avatar {
  // margin-top: 10px;
  margin-left: 10px;
}

.info-ss {
  height: 70px;
  // line-height: 70px;
  text-align: center;
}


.info-xx {
  width: 212px;
  margin-top: -5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.info-xx-xq {
  margin-left: 10px;
  font-size: 12px;
  color: #9e9e9e;
}

::v-deep .info-menu .el-badge__content.is-fixed {
  margin-top: 10px;
}

.info-menu0 {
  border-right: 0px !important;
}

.info-time {
  float: right;
  margin-right: 15px;
  color: #9e9e9e;
}

::v-deep .info-group .el-avatar {
  margin-left: 4px;
}

/*---滚动条默认显示样式--*/

::-webkit-scrollbar-thumb {
  // background-color: #ccc;
  // height: 100px;
  outline-offset: -2px;
  // outline: 2px solid #fff;
  // border: 2px solid #fff;
  height: 79px;
  background: #B7BDCB;
  box-shadow: 1px 1px 50px 0px rgba(112, 124, 151, 0.15), 2px 2px 10px 0px rgba(112, 124, 151, 0.1), 4px 4px 15px 0px rgba(112, 124, 151, 0.05);
  border-radius: 10px;
}

/*---滚动条大小--*/
::-webkit-scrollbar {
  width: 6px;
  height: 79px;
}

::v-deep .info-user .el-avatar {
  margin-left: 10px;
}

.info-kjhf {
  width: 20%;
  float: left;
}

.info-kjhf .info-xx {
  width: 98%;
  margin-top: -5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.info-kjhf .el-menu {
  border: 0;
}

.info-kjhf .info-aside {
  width: 100% !important;
  border: 0;
  height: calc(90.5vh);
  overflow-y: auto;
}

::v-deep .weid {
  background: linear-gradient(135deg, #7CB8F7 0%, #2A8BF2 100%);
  box-shadow: 10px 6px 25px 0px rgba(42, 139, 242, 0.15), 4px 4px 25px 0px rgba(42, 139, 242, 0.05), 6px 6px 25px 0px rgba(42, 139, 242, 0.15);
  border-radius: 6px;
}

::v-deep .weidu-info .el-badge__content.is-fixed {
  right: 12px;
  margin-top: 10px;
}

::v-deep .el-menu-item.is-active {
  color: red;
}

::v-deep .el-menu-item:hover,
.el-menu-item:focus,
.el-menu-item:active {
  outline: none;
  background-color: #dcdfe6;
}

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}

::v-deep .el-scrollbar__thumb {
  height: 0 !important;
}

.box-s {
  background: #FFFFFF;
  box-shadow: 24px 6px 50px 0px rgba(0, 0, 0, 0.02), 35px 0px 70px 0px rgba(86, 128, 248, 0.05), 14px 0px 25px 0px rgba(86, 128, 248, 0.03);
  border-radius: 6px;
}

.m-10-10-0-10 {
  margin: 10px 10px 0 10px;
}

::v-deep .el-input__inner {
  border: 0;
  box-shadow: 0 0 0 0px;
}

::v-deep .el-input-group__append {
  border: 0;
  background: linear-gradient(135deg, #7CB8F7 0%, #2A8BF2 100%);
  box-shadow: 10px 6px 25px 0px rgba(42, 139, 242, 0.15), 4px 4px 25px 0px rgba(42, 139, 242, 0.05), 6px 6px 25px 0px rgba(42, 139, 242, 0.15);
  border-radius: 6px;
}

.box-s1 {
  background: #FFFFFF;
  box-shadow: 24px 6px 50px 0px rgba(0, 0, 0, 0.02), 35px 0px 70px 0px rgba(86, 128, 248, 0.05), 14px 0px 25px 0px rgba(86, 128, 248, 0.03);
  border-radius: 6px;
}

::v-deep .item .el-badge__content.is-fixed {
  left: 5px;
  top: 20px;
  background-color: #7CB8F7;
}

.items {
  position: relative;
}
.item {
  position: absolute;
  left: 10px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.bg-1 {
  background-color: #00F807;
}
.bg-2 {
  background-color: #FF1717;
}
.bg-3 {
  background-color: #FEB001;
}
.bg-4 {
  background-color: #B4B4B4;
}

</style>
